<template>
  <view class="page">
    <view class="progress-area">
      <view class="bar"><view class="bar-fill full"></view></view>
      <view class="steps"><view class="step">残疾人证认证</view><view class="step active">身份证认证</view></view>
    </view>

    <view class="content">
      <view class="label">身份证正面</view>
      <view class="upload-card" @tap="pick('front')">
        <view class="left"><view class="title">正面</view><view class="sub">上传您的身份证正面</view></view>
        <image class="preview-img" :src="imgs.front || img_path" mode="aspectFit" />
      </view>

      <view class="spacer"></view>

      <view class="label">身份证背面</view>
      <view class="upload-card" @tap="pick('back')">
        <view class="left"><view class="title">背面</view><view class="sub">上传您的身份证背面</view></view>
        <image class="preview-img" :src="imgs.back || img_path" mode="aspectFit" />
      </view>

      <view class="bottom-gap"></view>

      <view class="cta-wrap"><button class="cta" @tap="submit">提交认证</button></view>
    </view>
  </view>
</template>

<script>
const PLACEHOLDER_IMG = 'https://kehu-1256834579.cos.ap-shanghai.myqcloud.com/weier/zhengjian.png';
export default {
  data() {
    return {
		imgs: { front: '', back: '' } ,
		img_path:'https://kehu-1256834579.cos.ap-shanghai.myqcloud.com/weier/zhengjian.png'
	};
  },
  methods: {
    goBack() { uni.navigateBack(); },
    onMenu() { uni.showActionSheet({ itemList: ['帮助', '联系客服'] }); },
    onScan() { uni.showToast({ title: '扫码', icon: 'none' }); },
    pick(side) {
      uni.chooseImage({
        count: 1, sizeType: ['compressed'],
        success: (res) => { this.imgs[side] = res.tempFilePaths[0]; }
      });
    },
    submit() { 
		uni.showToast({ title: '已提交', icon: 'success' }); 
		uni.switchTab({
			url:'/pages/index/index'
		});
	}
  }
};
</script>

<style lang="scss" scoped>
@import "@/pages/index/renzheng.scss";
</style>
